<template>
  <div class="box-t">
    <el-table
      ref="commonTable"
      :data="tableData"
      :height="height"
      :stripe="stripe"
      :border="border"
      :size="size"
      :highlight-current-row="highlightCurrentRow"
      :row-style="rowStyle"
      :row-key="rowKey"
      :cell-style="cellStyle"
      :show-summary="showSummary"
      :summary-method="summaryMethod"
      :span-method="spanMethod"
      v-on="tableEvents"
      :default-expand-all="false"
      v-loading="loading"
      :header-cell-style="{
        background: '#f9f9f9',
      }"
    >
      <el-table-column
        v-if="selection"
        type="selection"
        width="50px"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="order"
        label="序号"
        type="index"
        width="80px"
        align="center"
      ></el-table-column>
      <template v-for="(col, index) in columns">
        <!-- 二级表头 -->
        <el-table-column v-if="col.children" :key="`lv1${index}`" :label="col.label" align="center">
          <el-table-column
            v-for="(col2, index2) in col.children"
            :key="`lv2${index2}`"
            :label="col2.label"
            :prop="col2.prop"
            :width="col2.width"
            :min-width="col2.minWidth"
            v-bind="col2.props"
            :show-overflow-tooltip="col2.disableTooltip ? false : true"
            align="center"
          >
            <template v-slot="{ row, column, $index }">
              <slot v-if="col2.prop" :name="col2.prop" :row="row" :column="column" :index="$index">
                {{ col2.filter ? col2.filter(row) : row[col2.prop] }}
              </slot>
              <slot
                v-else-if="col.label === '操作'"
                name="opt"
                :row="row"
                :column="column"
                :index="$index"
              >
              </slot>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 一级表头 -->
        <el-table-column
          v-else
          :key="`lv2${index}`"
          :label="col.label"
          :prop="col.prop"
          :width="col.width"
          :min-width="col.minWidth"
          v-bind="col.props"
          :show-overflow-tooltip="col.disableTooltip ? false : true"
          align="center"
        >
          <template v-slot="{ row, column, $index }">
            <slot v-if="col.prop" :name="col.prop" :row="row" :column="column" :index="$index">
              {{ col.filter ? col.filter(row) : row[col.prop] }}
            </slot>
            <slot
              v-else-if="col.label === '操作'"
              name="opt"
              :row="row"
              :column="column"
              :index="$index"
            >
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";

// 定义列配置接口
interface TableColumn {
  label: string;
  prop?: string;
  width?: string | number;
  minWidth?: string | number;
  disableTooltip?: boolean;
  filter?: (row: any) => any;
  props?: Record<string, any>;
  children?: TableColumn[];
}

// 定义表格事件接口
interface TableEvents {
  [key: string]: Function;
}

const props = defineProps({
  // 表格配置
  columns: {
    type: Array as PropType<TableColumn[]>,
    default: () => [],
  },
  // 表格数据
  tableData: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  // 序号
  order: {
    type: Boolean,
    default: true,
  },
  // 多选
  selection: {
    type: Boolean,
    default: false,
  },
  // 高度
  height: {
    type: String,
    default: "auto",
  },
  // 斑马纹
  stripe: {
    type: Boolean,
    default: false,
  },
  // 纵向边框
  border: {
    type: Boolean,
    default: false,
  },
  // table尺寸
  size: {
    type: String as PropType<"large" | "default" | "small">,
    default: "large",
  },
  // 当前行高亮
  highlightCurrentRow: {
    type: Boolean,
    default: false,
  },
  rowStyle: {
    type: [Object, Function] as any,
    default: () => ({}),
  },
  rowKey: {
    type: String,
    default: "id",
  },
  cellStyle: {
    type: [Object, Function] as any,
    default: () => ({}),
  },
  // 显示合并栏
  showSummary: {
    type: Boolean,
    default: false,
  },
  // 合并栏处理方法
  summaryMethod: {
    type: Function as any,
    default: () => {},
  },
  // 合并行或列的计算方法
  spanMethod: {
    type: Function as any,
    default: () => {},
  },
  // 表格事件
  tableEvents: {
    type: Object as PropType<TableEvents>,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss"></style>
